<template>
  <div>
    <el-dialog
      title="添加设备"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div class="treebox">
        <div class="litt">
          <el-tree
          v-if="dialogVisible"
          :props="props"
          :load="loadNode"
          lazy
          show-checkbox
          node-key="id"
          check-strictly
          @check-change="handleNodeClick"
          ref="tree"
          >
          </el-tree>
          <div class="sure"><el-button type="primary" class="sure" size="small" @click="sure">确认选择</el-button></div>
        </div>
        <div class="litt rigli">
          <div class="devli" v-for="(item,index) in checklist" :key="index">
            <div>{{ item.name }}</div>
            <div class="tab"><i class="el-icon-remove" @click="dellist(item)"></i> </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setdev" size="small">保 存</el-button>
        <el-button @click="quxiao" size="small">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getgenjiedianapi, getzijidianapi } from '@/api/monitor'
export default {
  name: 'CallPoliceAddlabel',
  props: {
    treemodel: {
      type:String,
    }
  },
  data() {
    return {
      dialogVisible: false,
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      treelist:[],
      checklist:[]
    }
  },

  mounted() {},

  methods: {
    // 保存
    setdev() {
      if(!this.checklist.length) return this.$message.warning('请先确认选择设备')
      this.$emit('getdevice', this.checklist)
      this.quxiao()
     },
    // 确认选择
    sure() {
      const uniqueArr = this.treelist.filter((item, index, self) =>
        index === self.findIndex((t) => (
          t.id === item.id
        ))
      );
      this.checklist=uniqueArr
    },
    // 删除
    dellist(item) {
      this.checklist=this.checklist.filter(ele=>ele.id!==item.id)
    },
    // 树节点勾选
    handleNodeClick(item) { 
      this.treelist=this.$refs.tree.getCheckedNodes()
    },
    // 取消
    quxiao() {
      this.dialogVisible = false
      this.checklist = this.treelist = []
      this.$refs.tree.setCheckedNodes([])
    },
    // 设备树懒加载
    async loadNode(node, resolve) {
      const {data:{list}} = await getgenjiedianapi({ treeModel: this.treemodel })
      const ress = await getzijidianapi(list[0])
      if (node.level === 0) { // 初始的级数（最顶层）
        return resolve(ress.data.list) // 最顶层数据渲染为region
      }
      if (node.level >= 1) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    },
  }
}
</script>
<style>
.treebox{
  display: flex;
  .litt{
    width: 50%;
    height: 400px;
    overflow-y: auto;
    .sure{
      text-align: right;
      margin-top: 10px;
      padding-right: 10px;
    }
  }
  .rigli{
    border-left: 1px solid #ccc;
    padding-left: 10px;
    .devli{
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .tab{
        .el-icon-remove{
          color: red;
          cursor: pointer;
          font-size: 20px;
        }
      }
    }
  }
}
</style>